<template>
  <div class="SetupSettingPage">
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form :inline="true" :model="state">
        <el-form-item label="菜单名">
          <el-input v-model="state.searchValue" maxlength="20" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <!-- <el-button type="success" plain @click="add(1)"
            >新增父级目录</el-button
          >
          <el-button type="success" plain @click="add(2)"
            >新增子级菜单</el-button
          > -->
          <el-button type="success" @click="handleAdd({ data: null, type: 'add' })">新增配置</el-button>
          <el-button type="success" :disabled="!state.multipleSelection.length" @click="handleSyncData"
            >同步配置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表 格   default-expand-all -->
    <div class="tableBox">
      <el-table
        ref="tableRef"
        v-loading="state.tableLoading"
        :data="state.tableData"
        row-key="permissionId"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        :style="{ width: '100%' }"
        class="dataTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="configTypeDescribe" label="配置分组" min-width="86px" />
        <el-table-column prop="configKey" label="配置标识" min-width="100px" />
        <el-table-column prop="configText" label="配置文本" min-width="100px" />
        <el-table-column prop="formTypeDescribe" label="表单类型" min-width="86px" />
        <el-table-column prop="formValue" label="表单选项" show-overflow-tooltip min-width="210px">
          <template #default="scope">
            <el-text
              type="primary"
              size="small"
              v-for="item in scope.row.formValueOptions"
              :key="item.value"
              style="display: block"
              >{{ item }}</el-text
            >
          </template>
        </el-table-column>
        <el-table-column prop="configValue" label="表单取值" min-width="86px">
          <template #default="scope">
            {{
              scope.row.formValueOptions.length
                ? scope.row.formValueOptions.find((e) => e.value == scope.row.configValue)?.label || '-'
                : scope.row.configValue
            }}
          </template>
        </el-table-column>
        <el-table-column prop="hasEditor" label="是否可编辑" min-width="96px">
          <template #default="scope">{{
            /[01]/.test(scope.row.hasEditor) ? (scope.row.hasEditor ? '是' : '否') : '-'
          }}</template>
        </el-table-column>
        <!-- <el-table-column prop="hasSyncData" label="是否同步" min-width="86px">
          <template #default="scope">
            <span v-if="scope.row.hasEditor == 0">
              {{
                /[01]/.test(scope.row.hasSyncData)
                  ? scope.row.hasSyncData
                    ? "是"
                    : "否"
                  : ""
              }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="updateTime" label="更新时间" min-width="100px">
          <template #default="scope">{{ dayjs(scope.row.updateTime).format('YYYY-MM-DD HH-mm-ss') }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="btnList">
              <el-button link type="primary" @click="handleAdd({ data: scope.row, type: 'edit' })">编辑</el-button>
              <el-popconfirm title="确认删除？" @confirm="handleDel(scope.row)">
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          v-model:current-page="state.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="state.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="state.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <DialogShopConfigAdd
      ref="dialogShopConfigAddRef"
      :configTypeList="state.configTypeList"
      :formTypeList="state.formTypeList"
      @ok="onAddOk"
    />

    <DialogConfigSyncData ref="dialogConfigSyncDataRef" @ok="handleSearch" />
  </div>
</template>

<script setup>
import { reactive, onBeforeMount, ref } from 'vue'
import {
  getShopConfigGetConfigTypeSelect,
  getShopConfigGetFormTypeSelect,
  postShopConfigModelGetAll,
  postShopConfigModelDelete,
} from '@/api/shop'
import DialogShopConfigAdd from './dialogShopConfigAdd.vue'
import DialogConfigSyncData from './dialogConfigSync.vue'
import { dayjs } from 'element-plus'

const state = reactive({
  tableLoading: false,
  searchValue: '',
  page: 1,
  pageSize: 10,
  total: 0,
  tableData: [],
  multipleSelection: [],
  configTypeList: [],
  formTypeList: [],
})

function getFormTypeName(type) {
  const item = state.formTypeList.find((e) => {
    return e.dictName == type
  })
  return item?.dictDescribe || '-'
}

function handleSelectionChange(val) {
  state.multipleSelection = val
}

function getJSONParse(str) {
  try {
    return JSON.parse(str)
  } catch (error) {
    return []
  }
}

// 初始化查询所有数据
function getTableData() {
  state.tableLoading = true
  postShopConfigModelGetAll({
    page: state.page,
    pageSize: state.pageSize,
  })
    .then((res) => {
      state.tableData = res.data.list.map((e) => {
        return {
          ...e,
          formValueOptions: getJSONParse(e.formValue),
        }
      })
      state.total = res.data.total
    })
    .finally(() => {
      state.tableLoading = false
    })
}

//  查询
function handleSearch() {
  state.page = 1
  getTableData()
}
// 清除
function handleReset() {
  state.searchValue = ''
  state.page = 1
  getTableData()
}
function handleCurrentChange(val) {
  state.page = val
  getTableData()
}
function handleSizeChange(val) {
  state.pageSize = val
  getTableData()
}

const dialogShopConfigAddRef = ref()
function handleAdd(data) {
  dialogShopConfigAddRef.value.show(data)
}

function onAddOk() {
  handleSearch()
}

function handleDel(row) {
  postShopConfigModelDelete({
    id: row.id,
  }).then((res) => {
    handleSearch()
  })
}

const dialogConfigSyncDataRef = ref()
function handleSyncData() {
  const ids = state.multipleSelection.map((item) => item.id)
  dialogConfigSyncDataRef.value.show(ids)
}

onBeforeMount(() => {
  handleSearch()
  getShopConfigGetConfigTypeSelect({ page: 1, pageSize: 9999 }).then((res) => {
    state.configTypeList = res.data
  })
  getShopConfigGetFormTypeSelect({ page: 1, pageSize: 9999 }).then((res) => {
    state.formTypeList = res.data
  })
})
</script>
<style lang="scss" scoped>
.SetupSettingPage {
  padding: 20px;
  margin-top: 20px;
  background-color: #ffffff;
}
</style>
